<section class="border-2 flex" x-data="{username: '<%= @current_user.username %>'}">
  <%= live_component @socket, InstagramCloneWeb.UserLive.SettingsSidebarComponent,
    settings_path: @settings_path,
    pass_settings_path: @pass_settings_path,
    current_uri_path: @current_uri_path %>

  <div class="w-full py-8">
    <%= for {_ref, err} <- @uploads.avatar_url.errors do %>
      <p class="text-red-500 w-full text-center">
        <%= Phoenix.Naming.humanize(err) %>
      </p>
    <% end %>
    <!-- Profile Photo -->
    <div class="flex items-center">
      <div class="w-1/3">
        <%= img_tag Avatar.get_thumb(@current_user.avatar_url), class: "ml-auto w-10 h-10 rounded-full object-cover object-center" %>
      </div>
      <div class="w-full pl-8">
        <h1 x-text="username" class="leading-none font-semibold text-lg truncate text-gray-500"></h1>
        <div class="relative">
          <%= form_for @changeset, "#",
            phx_change: "upload_avatar" %>
              <%= live_file_input @uploads.avatar_url, class: "cursor-pointer relative block opacity-0 z-40 -left-24" %>
              <div class="text-center absolute top-0 left-0 m-auto">
                <span class="font-semibold text-sm text-light-blue-500">
                  Change Profile Photo
                </span>
              </div>
          </form>
        </div>
      </div>
    </div>
    <!-- END PROFILE PHOTO -->

    <%= f = form_for @changeset, "#",
      phx_change: "validate",
      phx_submit: "save",
      class: "space-y-8 md:space-y-10" %>

      <div class="flex items-center">
        <%= label f, :full_name, class: "w-1/3 text-right font-semibold" %>
        <div class="w-full pl-8 pr-20">
          <%= text_input f, :full_name, class: "w-4/6 rounded p-1 text-semibold text-gray-600 border-gray-300 focus:ring-transparent focus:border-black", autocomplete: "off" %>
          <%= error_tag f, :full_name, class: "text-red-700 text-sm block" %>
        </div>
      </div>

      <div class="flex items-center">
        <%= label f, :username, class: "w-1/3 text-right font-semibold" %>
        <div class="w-full pl-8 pr-20">
          <%= text_input f, :username, class: "w-4/6 rounded p-1 text-semibold text-gray-600 border-gray-300 focus:ring-transparent focus:border-black", x_model: "username", autocomplete: "off" %>
          <%= error_tag f, :username, class: "text-red-700 text-sm block" %>
        </div>
      </div>

      <div class="flex items-center">
        <%= label f, :website, class: "w-1/3 text-right font-semibold" %>
        <div class="w-full pl-8 pr-20">
          <%= text_input f, :website, class: "w-4/6 rounded p-1 text-semibold text-gray-600 border-gray-300 focus:ring-transparent focus:border-black", autocomplete: "off" %>
          <%= error_tag f, :website, class: "text-red-700 text-sm block" %>
        </div>
      </div>

      <div class="flex items-center">
        <%= label f, :bio, class: "w-1/3 text-right font-semibold" %>
        <div class="w-full pl-8 pr-20">
          <%= textarea f, :bio, class: "w-4/6 rounded p-1 text-semibold text-gray-600 border-gray-300 focus:ring-transparent focus:border-black", rows: 3, autocomplete: "off" %>
          <%= error_tag f, :bio, class: "text-red-700 text-sm block" %>
        </div>
      </div>

      <div class="flex items-center">
        <%= label f, :email, class: "w-1/3 text-right font-semibold" %>
        <div class="w-full pl-8 pr-20">
          <%= email_input f, :email, class: "w-4/6 rounded p-1 text-semibold text-gray-600 border-gray-300 shadow-sm focus:ring-transparent focus:border-black", autocomplete: "off" %>
          <%= error_tag f, :email, class: "text-red-700 text-sm block" %>
        </div>
      </div>

      <div class="flex items-center">
        <label class="block w-1/3 font-semibold text-right"></label>
        <div class="w-full pl-8 pr-20">
          <%= submit "Submit", phx_disable_with: "Saving...", class: "w-16 py-1 px-1 border-none shadow rounded font-semibold text-sm text-gray-50 hover:bg-light-blue-600 bg-light-blue-500 cursor-pointer" %>
        </div>
      </div>
    </form>
  </div>
</section>
